<template>
  <div class="container">
    <!-- 搜索框 -->
    <div class="search">
      <el-input v-model="searchValue" placeholder="请输入查找的班组编号" clearable :prefix-icon="Search" />
    </div>
    <!-- 表格 -->
    <div class="table">
      <el-table :data="teams" border stripe height="580">
        <el-table-column
          v-for="col in columns"
          :prop="col.prop"
          :key="col.id"
          :label="col.label"
          :width="col.width"
          align="center">
        </el-table-column>
        <el-table-column label="评价" width="" align="center">
          <template #default="scoped">
            <el-select v-model="scoped.row.evaluate" placeholder="请选择评价" clearable>
              <el-option v-for="item in options" :key="item.value" :label="item.value" :value="item.value" />
            </el-select>
          </template>
        </el-table-column>

        <!-- 操作 -->
        <el-table-column fixed="right" label="操作" width="100" align="center">
          <template #default="scoped">
            <el-button-group>
              <el-button type="success" size="small" @click="updateTeam(scoped.row)">
                <Refresh theme="outline" size="14" fill="#fff" />
              </el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
import { Refresh } from '@icon-park/vue-next'
import { ElMessage } from 'element-plus'

import useTeam from '@renderer/composables/useTeam'

import { ref } from 'vue'

const { all, update, teams } = useTeam()

const searchValue = ref('')

const columns = [
  { id: 1, label: '分包商', prop: 'comp.shortName', width: '90' },
  { id: 2, label: '班组', prop: 'team', width: '90' },
  { id: 3, label: '负责人', prop: 'fzr', width: '90' },
]
const options = [
  { id: 1, value: '待定' },
  { id: 2, value: '合格' },
  { id: 3, value: '不合格' },
]
const updateTeam = async (data: teamModel) => {
  await update(data.id, {
    compId: data.compId,
    team: data.team,
    fzr: data.fzr,
    evaluate: data.evaluate,
  })
  ElMessage({
    type: 'success',
    message: '修改成功',
  })
}

all()
</script>

<style lang="scss" scoped>
.search {
  @apply w-full;
}
.table {
  @apply mt-3 w-full;
}
</style>
